import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { showList, updateLists, setLogger } from '_redux/actions/picture'
import { addDragDrop } from '_redux/actions/dragDrops'
import 'css/index/picture/picture.scss'

import PictureLists from './PictureList.jsx'
import { findSeasonLists } from 'utils/Api'
import AddLogger from './AddLogger'
import AddVideoLogger from './AddVideoLogger'

import addLogger from 'images/index/picture/addLogger.png'
import addVideo from 'images/index/picture/addVideo.png'

class JobLogging extends Component {
  constructor() {
    super()
    this.state = {
      imgs: [],
      log: {},
      season: '',
    }
  }
  componentDidMount() {
    const { feature: { feature } } = this.props
    const season_id = feature.get('season_id')
    findSeasonLists()
      .then(({ msg, result }) => {
        if (msg === '200') {
          this.setState({
            season: result.filter(s => season_id === s.id)[0].name
          })
        }
      })
    this.jobLogging && this.jobLogging.scrollIntoView(true)
    // 
    //用firefox变量表示火狐代理
    // var firefox = navigator.userAgent.indexOf('Firefox') != -1
    // function MouseWheel(e) {//阻止事件冒泡和默认行为的完整兼容性代码
    //     console.log(e)
    //     e = e || window.event
    //     if (e.stopPropagation) {//这是取消冒泡
    //         e.stopPropagation()
    //     } else {
    //         e.cancelBubble = true
    //     };
    //     if (e.preventDefault) {//这是取消默认行为，要弄清楚取消默认行为和冒泡不是一回事
    //         e.preventDefault()
    //     } else {
    //         e.returnValue = false
    //     };
    // }
    // // var con = document.getElementById('content')//要在content内部滚动，而页面不受影响，所以这里获取要滚动的对象
    // //如果是ff就绑定DOMMouseScroll事件，其他浏览器就用onmousewheel事件触发
    // firefox ? this.pictureLists.addEventListener('DOMMouseScroll', MouseWheel, false) : (this.pictureLists.onmousewheel = MouseWheel)
  }
  componentDidUpdate() {
    const { feature: { feature } } = this.props
    if (feature.getId()) {
      this.jobLogging && this.jobLogging.scrollIntoView(true)

    }
  }
  shouldComponentUpdate(nextProps) {
    const { feature } = nextProps.feature
    if (!feature.getId()) {
      return false
    }
    return true
  }
  close = (e) => {
    e.preventDefault()
    this.props.showList(false)
  }
  handleLogger = (e) => {
    e.preventDefault()
    this.props.setLogger(undefined)
    this.props.addDragDrop({
      id: 'addLogger',
      title: '新建图片日志',
      children: AddLogger,
      position: { x: -900 / 2, y: -350 / 2 }
    })
  }
  handleVideoLogger = (e) => {
    e.preventDefault()
    this.props.setLogger(undefined)
    this.props.addDragDrop({
      id: 'addVideoLogger',
      title: '新建视频日志',
      children: AddVideoLogger,
      position: { x: -640 / 2, y: -350 / 2 }
    })
  }
  modifyLogger = (log) => {
    this.setState({
      log: JSON.parse(log),
      logger: true
    })
  }
  render() {
    const { show } = this.props.picture
    return (
      show ? <div className='pictureLists' ref={jobLogging => this.jobLogging = jobLogging}>
        <div className='title'>
          <h3>{this.props.feature.feature.get('name')}：{this.state.season} 生长日志</h3>
          <div className='tools'>
            <div className='add' onClick={this.handleLogger}>
              <img src={addLogger} alt="" />
              {/* <span>添加图片</span> */}
            </div>
            <div className='add' onClick={this.handleVideoLogger}>
              <img src={addVideo} alt="" />
              {/* <span>添加视频</span> */}
            </div>
            <a href="#" className='closer' onClick={this.close}></a>
          </div>
        </div>
        <div className='content'>
          <PictureLists {...this.props} modifyLogger={this.modifyLogger} />
        </div>
      </div> : null
    )
  }
}


JobLogging.propTypes = {
  picture: PropTypes.object,
  showList: PropTypes.func,
  feature: PropTypes.object,
  updateLists: PropTypes.func,
  addDragDrop: PropTypes.func,
  setLogger: PropTypes.func,
}

export default connect(({ picture, feature }) => ({
  picture,
  feature,
}), dispatch => ({
  showList: show => dispatch(showList(show)),
  updateLists: list => dispatch(updateLists(list)),
  addDragDrop: children => dispatch(addDragDrop(children)),
  setLogger: logger => dispatch(setLogger(logger))
}))(JobLogging)